<template>
	<nt-container>
		<view class="payment">
			<view class="payment-card">
				<nt-order-detail :orderInfo="orderInfo"></nt-order-detail>
			</view>
			<view class="payment-card">
				<nt-card label="支付内容">
					<template v-if="paymentList.length">
						<div v-for="(it, index) in paymentList" :key="index">
							<view class="payment-card__item" :key="index">
								<view class="payment-card__item--label" @tap="changePaymeng(index)">{{ it.paytype }}</view>
								<view class="payment-card__item--right">
									<u--input 
										class="payment-card__item--input" 
										placeholder="请输入价格" 
										v-model="it.payprice" 
									></u--input>
									<view 
										class="payment-card__item--btn"
										@tap="deletePayment(index)"
									>-</view>
								</view>
							</view>
							<view class="payment-card__item nopad">
								<view class="payment-card__item--label"></view>
								<view class="payment-card__item--right">
									<u--textarea
										:key="index"
										calss="payment-card__remarks" 
										placeholder="请输入支付备注" 
										v-model="it.remarks" 
										autoHeight
										height="40"
									></u--textarea>
								</view>
							</view>
						</div>
					</template>
					<!-- <view class="subtitle">上传支付</view> -->
					<nt-card-item label="上传支付图片" desc="每张图片大小不超过1M"></nt-card-item>
					<nt-upload @success="paymentImages = $event" :images="orderInfo.payimages"></nt-upload>
					
					<view class="payment-card__input">
						<view class="payment-card__input-type">
							<u--input 
								v-model="payInfo.label" 
								:readonly="payInfo.readonly" 
								:placeholder="!payInfo.readonly ? '请输入' : ''"
							></u--input>
						</view>
						<u--input class="payment-card__input-ipt" placeholder="请输入金额" v-model="paymentTpl.payprice" />
						<view class="payment-card__input-add" @tap="addPaymentHandle">添加</view>
					</view>
					<view class="payment-card__remarks">
						<u--textarea v-model="paymentTpl.remarks" autoHeight height="40" placeholder="请输入支付备注"></u--textarea>
					</view>
					
					<view class="payment-card__select">
						<view 
							class="payment-card__select--item" 
							:class="{ active: payIndex === index }"
							:key="it.value"
							v-for="(it, index) in paymentTypeInfo.data"
							@tap="selectPayment(index, it)"
						>{{ it.name }}</view>
					</view>
					<view class="payment-card__payimage" v-if="payIndex > -1 && paymentTypeInfo.data[payIndex].payment_images">
						<nt-cdn-image :src="paymentTypeInfo.data[payIndex].payment_images"></nt-cdn-image>
					</view>
					<view class="payment-card__invoice">
						<view 
							class="payment-card__invoice--item" 
							v-for="(it, index) in paymentTypeInfo.company_publicaccount" 
							:key="index"
						>
							<text class="payment-card__invoice--item-desc" selectable>名称：{{ it.company }}</text>
							<text class="payment-card__invoice--item-desc" selectable>识别号：{{ it.identification }}</text>
							<text class="payment-card__invoice--item-desc" selectable>地址：{{ it.address }}</text>
							<text class="payment-card__invoice--item-desc" selectable>电话：{{ it.phone }}</text>
							<text class="payment-card__invoice--item-desc" selectable>开户行：{{ it.bank }}</text>
							<text class="payment-card__invoice--item-desc" selectable>账号：{{ it.bankaccount }}</text>
							<text class="payment-card__invoice--item-desc" selectable>邮箱：{{ it.mailbox }}</text>
						</view>
					</view>
				</nt-card>
			</view>
			<view class="payment-footer">
				<nt-button text="提交修改" @tap="submit"></nt-button>
			</view>
			
			<u-picker
				:show="show" 
				ref="uPicker" 
				:columns="[updatePaymentList]"
				@confirm="updatePayment"
				@close="show = false" 
				@cancel="show = false" 
				keyName="name"
				closeOnClickOverlay
			></u-picker>
		</view>
	</nt-container>
</template>

<script>
import { getCommonFormConfig, postPaymentSignEdit, getOrderDetail } from "@/api"
export default {
	data(){
		return {
			orderId: "",
			payIndex: -1,
			paymentTypeInfo: {},
			showPayItem: true,
			paymentList: [],
			paymentTpl: {
				paytype: null,
				payprice: "",
				remarks: ""
			},
			// 未付备注
			remarks: "",
			paymentImages: [],
			// 订单信息
			orderInfo: {},
			show: false,
			columns: [],
			changeIndex: 0,
			// 动态支付类型
			filters: [],
		}
	},
	onLoad(options){
		this.orderId = options.id || ""
		this.getFormConfig()
		this.getDetail()
	},
	computed: {
		payInfo(){
			let label = this.paymentTpl.paytype === null ? "支付类型" : this.paymentTpl.paytype
			let readonly = this.paymentTpl.paytype !== ''
			return {
				label,
				readonly
			}
		},
		updatePaymentList(){
			if(!this.paymentTypeInfo?.data) return;
			if(this.filters.length === 0){
				this.filters = this.paymentTypeInfo.data.filter(item => item.value != "")
			}
			const keys = this.filters.map(item =>item.name)
			const result = this.paymentList.reduce((acc, item) => {
				if(!keys.includes(item.paytype)){
					this.$set(this.filters, this.filters.length, { name: item.paytype, value: item.paytype })
					acc.push({
						name: item.paytype,
						value: item.paytype
					})
				}
				return acc
			}, [...this.filters])
			return result
		}
	},
	methods: {
		getFormConfig(type){
			getCommonFormConfig(this.orderId).then(res => {
				const { code, data } = res;
				if(code !== 1) return;
				this.formConfig = data
				const filter = data.paymentTypeList.data.filter(item => ['收款二维码', '京东淘宝', '公帐', '现金', '抖音'].includes(item.value))
				this.paymentTypeInfo = {
					data: filter,
					company_publicaccount: data.paymentTypeList.company_publicaccount
				}
			})
		},
		// 选择支付方式
		selectPayment(index, it){
			const check = this.paymentList.some(item => item.value === '未付') && it.value === '未付'
			console.log(check, it.value)
			if(check) return  this.toast("已存在一条未付信息")
			this.payIndex = index;
			this.paymentTpl.paytype = it.value
		},
		// 删除支付
		deletePayment(index){
			this.paymentList.splice(index, 1)
		},
		// 添加支付
		addPaymentHandle(){
			this.paymentTpl.paytype = this.payInfo.label === "支付类型" ? null : this.payInfo.label
			const { payprice, paytype } = this.paymentTpl
			if(this.paymentTpl.paytype === null) return this.toast("请选择支付类型")
			if(paytype === "") return this.toast("请输入收款信息")
			if(!payprice) return this.toast("请输入价格")
			this.paymentList.push({...this.paymentTpl})
			this.payIndex = -1
			this.paymentTpl = {
				paytype: null,
				payprice: "",
				remarks: ""
			}
		},
		submit(){
			const check = this.paymentList.some(item => item.paytype === "未付" && !item.remarks)
			if(check) return this.toast("未付备注不能为空")
			// 判断是否填写支付信息没有提交的数据
			if(this.paymentTpl.payprice) return this.toast("请添加支付后再提交")
			if(!this.paymentList.length) return this.toast("请添加支付内容")
			if(!this.paymentImages.length) return this.toast("请上传支付图片")
			let parmas = {
				realorder_id: this.orderId,
				payment_images: this.paymentImages.map(item => item.url),
				payment: this.paymentList
			}
			const nopay = this.paymentList.find(item => item.paytype === '未付' && item.remarks)
			if(nopay){
				parmas.payment_nopay_reamarks = nopay.remarks
			}
			console.log(parmas)
			// return 	
			postPaymentSignEdit(parmas).then(res => {
				const { code, msg } = res;
				if(code !== 1) return;
				this.toast("签单修改成功")
				setTimeout(() => this.back(), 1000)
			})
		},
		// 订单详情
		getDetail(){
			getOrderDetail(this.orderId,'postPaymentSignEdit').then(res => {
				const { data, code } = res;
				this.orderInfo = data;
				// 如果是签单，默认不回显，取而代之将签单这条数据转换为默认选中二维码收款，金额自动填入
				(data.payment || []).map(item => {
					if(item.paytype === '签单'){
						this.payIndex = 0
						this.paymentTpl = {
							paytype: this.paymentTypeInfo.data[0].value,
							payprice: item.payprice,
							remarks: item.remarks
						}
					}else{
						this.paymentList.push({
							paytype: item.paytype,
							payprice: item.payprice,
							remarks: item.remarks
						})
					}
				})
			})
		},
		updatePayment(e){
			const { indexs, value } = e
			this.paymentList[this.changeIndex].paytype = value[0].value
			this.show = false;
		},
		changePaymeng(index){
			this.changeIndex = index
			this.show = true
		},
		copyPayment(it){
			let copyText = ""
			copyText += '名称：' + it.company + '\r\n'
			copyText += '识别号：' + it.identification + '\r\n'
			copyText += '地址：' + it.address + '\r\n'
			copyText += '电话：' + it.phone + '\r\n'
			copyText += '开户行：' + it.bank + '\r\n'
			copyText += '账号：' + it.bankaccount + '\r\n'
			copyText += '邮箱：' + it.mailbox + '\r\n'
			this.copyText(copyText)
		}
	}
}
</script>

<style lang="scss" scoped>
.payment{
	padding: 20rpx 20rpx 160rpx;
	box-sizing: border-box;
	&-card{
		margin-bottom: 20rpx;
		/deep/ .nt-card{
			border-radius: 20rpx;
		}
		&__item{
			display:flex;
			align-items: center;
			padding: 20rpx 0;
			&.nopad{
				padding: 0;
			}
			&--label{
				width: 200rpx;
				font-size: 30rpx;
				color:#333;
				font-weight: bold;
			}
			&--right{
				flex: 1;
				display:flex;
				align-items: center;
				justify-content: space-between;
				/deep/ .u-textarea{
					background:#f5f5f5;
				}
			}
			&--btn{
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 50%;
				text-align: center;
				font-weight: bold;
				color:#fff;
				font-size: 50rpx;
				background: #333;
				margin-left: 40rpx;
			}
			&--input{
				flex: 1;
				height: 70rpx;
				border-radius: 10rpx;
				background:#F5F5F5;
				padding: 0 10rpx;
				box-sizing: border-box;
			}
		}
		&__payimage{
			height: 1000rpx;
		}
		&__select{
			display:flex;
			flex-wrap: wrap;
			&--item{
				width: 150rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				background: #F5F5F5;
				color:#666;
				font-weight: bold;
				text-align: center;
				margin-right: 15rpx;
				margin-bottom: 15rpx;
				font-size: 24rpx;
				&.active{
					background:var(--theme-color);
					color:#fff;
				}
				// flex: 1;
				&.no-margin{
					margin-right: 0;
				}
			}
		}
		&__invoice{
			-webkit-user-select: text;
			user-select: text;
			&--item{
				padding: 30rpx 0;
				border-top: 1rpx solid #e5e5e5;
				font-size: 24rpx;
				color: #333;
				line-height: 40rpx;
				&-desc{
					display: block;
					
				}
			}
		}
		&__remarks{
			margin-bottom: 20rpx;
			/deep/ .u-textarea{
				background:#f5f5f5;
			}
		}
		&__input{
			display:flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;
			font-size: 28rpx;
			margin: 20rpx 0;
			&-type{
				width: 180rpx;
				height: 70rpx;
				line-height: 68rpx;
				border-radius: 10rpx;
				color:#333;
				border: 1rpx solid #333;
			}
			&-ipt{
				width: 270rpx;
				height: 70rpx;
				padding: 0 10rpx;
				box-sizing: border-box;
				border: 1rpx solid #333 !important;
				border-radius: 10rpx;
				flex: 1;
				margin: 0 20rpx;
				text-align: left;
			}
			&-add{
				width:150rpx;
				background-color: var(--theme-color);
				color:#fff;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 10rpx;
				
			}
		}
	}
	&-footer{
		position: fixed;
		bottom: 0;
		left:0;
		right:0;
		padding: 20rpx;
		box-sizing: border-box;
		background:#fff;
		box-shadow: 0 0 10rpx rgba(0,0,0,0.2);
	}
}
</style>